<template>
<div style="width: 400px; height: 800px;margin: auto; border: 1px solid; position: relative; overflow: auto ;">
    <div style="width: 100%; height: 50px; box-sizing: border-box;">
        <input type="text" style="width: 80%; height: 100%; box-sizing: border-box;" v-model="aa">
        <button style="width: 20%; height: 100%;" @click="tianjia">添加</button>
    </div>
    <div v-for="(item, index) in store.list" :key="index" style="width: 100%; height: 50px; margin: 10px 0 ; display: flex; align-items: center; border: 1px solid; box-sizing: border-box;">
        <input @change="a(item.checked)" v-model="item.checked" style="width: 30px; height: 30px;" type="checkbox">
        {{ item.name }}
    </div>

    <div style="width:100%; height: 50px; box-sizing: border-box; border: 1px solid;
    position: absolute; bottom: 0;display: flex; align-items: center; 
    ">
    <div style="display: flex; margin-right: 20px; align-items: center;">全选: <input style="width: 30px; height: 30px; position: relative;" type="checkbox" v-model="qxzt" @change="qx" ></div>
    <div> 全部：{{ store.list.length }}</div>
    <div style="width: 20px; height: 20px; background-color: red; color: #fff; border-radius: 90px; display: flex; align-items: center; justify-content: center; position: absolute; left: 15%; top: 5%;">{{ xz }}</div>
    </div>
    
</div>
</template>
<script setup>
import { reactive, ref,computed} from 'vue'
import { useRouter} from 'vue-router'; //路由
import Store from '../store/index'; //
//vuex
const router = useRouter() //路由赋值

const store = Store()

const aa = ref(null)

// const xzsl = ref(0)

const xz = computed(() => {
    return store.list.filter(item => item.checked == true).length
})

const a = (e) => {
    let b = ref(0)
    qxzt.value = false
    store.list.forEach(item => {
        if(item.checked == true){
            b.value+=1
            if(b.value == store.list.length){
                qxzt.value = true
            }else{
                qxzt.value = false
            }
        }
        
    })
    // console.log(a.value);
    // console.log(store.list.length);
}
const tianjia = () => {
    const obj = reactive({
        name: aa.value,
        checked:false,
        num: Math.floor(Math.random()*9000)
    })
    if(obj.name == null){
        alert('请填写内容')
    }else{
        store.list.push(obj)
    }
    // aa.value = null
    a()
}
const qxzt = ref(false)

const qx = (e) => {
        store.list.forEach((item) => {
            if(e.target.checked){
                item.checked = true
            }else{
                item.checked = false
            }
        })
        // console.log(qxzt);
}
</script>
<style>
</style>